import React, {PropTypes} from 'react';
import classNames from 'classnames';
import './FiveHealthHabitButtons.css';

class FiveHealthHabitButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mark: props.markValue,
      ...props.defaultValue,
    };
  }

  getCount() {
    const count = [
      this.state.okSmoking,
      this.state.okActivity,
      this.state.okBmi,
      this.state.okSalineFood,
      this.state.okAlcohol,
    ].reduce((cnt, flg) => flg ? cnt + 1 : cnt, 0);
    return count;
  }

  render() {
    return (
      <div className="FiveHealthHabitButtons" >
        <div className="FiveHealthHabitButtons-content" >
          <div>
            {this._renderButton('okSmoking', '非喫煙(20年以上)')}
            {this._renderButton('okActivity', '活発な身体活動')}
          </div>
          <div>
            {this._renderButton('okBmi', '適正なBMI値')}
            {this._renderButton('okSalineFood', '塩蔵品を控える')}
          </div>
          <div>
            {this._renderButton('okAlcohol', '節酒')}
          </div>
        </div>
      </div>
    );
  }

  _renderButton(key, label) {
    const {readonly} = this.props;
    const marked = this.state.mark[key];
    const done = this.state[key];

    let className = '';
    if (readonly) {
      if (marked) {
        className = 'marked';
      } else {
        className = 'unmarked'
      }
    } else {
      if (marked) {
        className = 'marked';
      } else if (done) {
        className = 'checked';
      } else {
        className = 'unchecked';
      }
    }

    return (
      <button
        className={classNames('health-habit-button', className)}
        type="button"
        onClick={()=> this._handleChange(key, done)}
        disabled={readonly || marked}
      >
        {this._renderCheckBox(key, done, className)}
        {label}
      </button>
    )
  }

  _handleChange(key, done) {
    const f = !done;
    this.setState({[key]: f}, ()=>{
      this.props.onChange(key, f, this.getCount());
    });
  }

  _renderCheckBox(key, done, className) {
    return (
      <div className={classNames('checkbox', className)} />
    );
  }
}

/*FiveHealthHabitButtons.PropTypes = {
  onChange: PropTypes.func,
  markValue: PropTypes.shape({
    okSmoking: PropTypes.boolean,
    okAlcohol: PropTypes.boolean,
    okBmi: PropTypes.boolean,
    okActivity: PropTypes.boolean,
    okSalineFood: PropTypes.boolean,
  }).isRequired,
  defaultValue: PropTypes.shape({
    okSmoking: PropTypes.boolean,
    okAlcohol: PropTypes.boolean,
    okBmi: PropTypes.boolean,
    okActivity: PropTypes.boolean,
    okSalineFood: PropTypes.boolean,
  }),
  readonly: PropTypes.boolean,
}*/
export default FiveHealthHabitButtons;
